import React, { useState } from 'react';
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
  ScrollView,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useNavigation } from '@react-navigation/native';
import { 
  ResponsiveContainer, 
  ResponsiveText,
  scale,
  Sizes
} from '../../components';

// Tab items 
const tabItems = [
  { key: 'all', title: '全部' },
  { key: 'pending_payment', title: '待付款' },
  { key: 'pending_shipment', title: '待发货' },
  { key: 'pending_receipt', title: '待收货' },
  { key: 'pending_evaluation', title: '待评价' },
];

const OrdersScreen: React.FC = () => {
  const [activeTab, setActiveTab] = useState('all');
  const navigation = useNavigation();

  const handleTabPress = (tabKey: string) => {
    setActiveTab(tabKey);
  };

  const handleBack = () => {
    navigation.goBack();
  };

  return (
    <ResponsiveContainer>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity onPress={handleBack} style={styles.backButton}>
          <Icon name="chevron-back" size={scale(24)} color="#000" />
        </TouchableOpacity>
        <ResponsiveText variant="large" weight="bold">我的订单</ResponsiveText>
        <View style={styles.placeholderRight} />
      </View>

      {/* Tab navigation */}
      <View style={styles.tabContainer}>
        <ScrollView 
          horizontal 
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.tabScrollContent}
        >
          {tabItems.map((item) => (
            <TouchableOpacity
              key={item.key}
              style={styles.tabItem}
              onPress={() => handleTabPress(item.key)}
            >
              <ResponsiveText 
                style={[
                  styles.tabText, 
                  activeTab === item.key && styles.activeTabText
                ]}
              >
                {item.title}
              </ResponsiveText>
              {activeTab === item.key && <View style={styles.activeIndicator} />}
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>

      {/* Empty state */}
      <View style={styles.emptyContainer}>
        <Image 
          source={{
            uri: ''
          }}
          style={styles.emptyImage}
        />
        <ResponsiveText variant="medium" color="#999999">抱歉, 没有找到订单哦</ResponsiveText>
      </View>
    </ResponsiveContainer>
  );
};

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: scale(50),
    paddingHorizontal: '4%',
  },
  backButton: {
    padding: Sizes.spacingTiny,
  },
  placeholderRight: {
    width: scale(30),
  },
  tabContainer: {
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  tabScrollContent: {
    paddingHorizontal: '4%',
  },
  tabItem: {
    paddingVertical: Sizes.spacingRegular,
    marginRight: Sizes.spacingXL,
    alignItems: 'center',
  },
  tabText: {
    color: '#666666',
  },
  activeTabText: {
    color: '#333333',
    fontWeight: 'bold',
  },
  activeIndicator: {
    position: 'absolute',
    bottom: 0,
    height: scale(3),
    width: scale(20),
    backgroundColor: '#4CAF50',
    borderRadius: Sizes.borderRadiusSmall / 2,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: '15%',
  },
  emptyImage: {
    width: scale(120),
    height: scale(120),
    tintColor: '#E0E0E0',
    marginBottom: Sizes.spacingLarge,
  },
});

export default OrdersScreen; 